<script setup lang="ts">
import { computed, ref } from "vue";
import { useRouter } from "vue-router";
import { useDarkMode } from "@/hooks/useToggleDarkMode";
import "@/assets/css/styles.css";

const realName = ref("");
const password = ref("");
const router = useRouter(); // 获取 router 实例

// 根据暗黑模式状态计算字体颜色
const titleColor = computed(() => (useDarkMode() ? "#fff" : "#333"));

// 用户信息
const users = [
  { id: 1, username: "youyou", password: "123456", realName: "youyou", email: "123456@163.com", roles: ["user"], icon: "/public/favicon.ico" },
  { id: 2, username: "test1", password: "123456", realName: "test1", email: "test1@163.com", roles: ["user"], icon: "/public/favicon.ico" },
  { id: 3, username: "test2", password: "123456", realName: "test2", email: "test2@163.com", roles: ["user"], icon: "/public/favicon.ico" },
];

const onSubmit = () => {
  // 校验输入
  if (!realName.value || !password.value) {
    alert("请输入完整信息");
    return;
  }

  // 登录验证
  const user = users.find(u => u.realName === realName.value && u.password === password.value);

  if (user) {
    localStorage.setItem("isLoggedIn", "true");
    router.push({ name: "Home" }); // 使用 router.push 进行路由跳转
  } else {
    alert("用户名或密码错误");
  }
};

const goToRegister = () => {
  router.push({ name: "Register" }); // 跳转到注册页面
};
</script>


<template>
  <div class="login-page-container">
    <div class="login-container">
      <!-- 小白系统 标题 -->
      <div class="login-title-container">
        <h1 :style="{ color: titleColor }">珠宝系统</h1>
      </div>

      <van-form @submit="onSubmit">
        <van-cell-group>
          <van-field
            v-model="realName"
            label="用户名"
            placeholder="请输入用户名"
            type="tel"
            required
          />
          <van-field
            v-model="password"
            label="密码"
            placeholder="请输入密码"
            type="password"
            required
          />
        </van-cell-group>

        <div class="login-button-container">
          <van-button
            round
            block
            type="primary"
            size="small"
            native-type="submit"
          >
            登录
          </van-button>
        </div>

        <div class="register-container">
          <van-button
            round
            block
            type="primary"
            size="small"
            @click="goToRegister"
          >
            注册新账号
          </van-button>
        </div>
      </van-form>
    </div>
  </div>
</template>

<style scoped>
</style>
